<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>1.双大括号表达式</h2>
    <p>{{msg}}</p><!--textContent-->
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p><!--textContent-->
    <p v-html="msg"></p><!--innerHTML-->

    <h2>2.指令一：强制数据绑定</h2>
    <img src="imgUrl">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">
    <h2>3.指令二：绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <button @click="test2(msg)">test1</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "<a href='http://www.atguigu.com'>I Will Back!</a>",
            imgUrl: "http://cn.vuejs.org/images/logo.png"
        },
        methods:{
            test(){
                alert("hehe!");
            },
            test2(content){
                alert(content);
            }
        }
    });
</script>
</body>
</html>